

let id;
let name1
//获取评论的接口
ajax({
    url: 'http://chst.vip:1902/students/getstulist',
    method: 'get'
})
    .then(res => {
        let ress = res.data
        console.log(ress);
        let tip_content = document.querySelector('#content')
        //渲染结构
        let html = ''
        ress.forEach(item => {
            html += `
        <div class="tip1" id="cc">

            <div class="tip_h" title="双击关闭纸条" id="${item.id}">
                <div class="num">第[49]条 ${item.time}</div>
                <div class="close" title="关闭纸条" id='${item.id}'>×</div>
                <div class="clr"></div>
            </div>
            <div class="tip_c">
                ${item.content}
            </div>
            <div class="tip_f">
                <div class="icon">
                    <img src="images/bpic_1.gif" alt="" title="">
                </div>
                <div class="name">${item.name}</div>
                <div class="clr"></div>
            </div>
            </div>

        `
        })
        tip_content.innerHTML = html

        //动态渲染评论0
        let count = document.querySelector('#count')
        count.innerHTML = `<b>评论:${ress.length}</b>`

        //让评论内容随机分布
        var content = document.querySelector('#content')
        //获取内容区的宽度和高度
        let con_width = content.offsetWidth
        let con_height = content.offsetHeight
        // console.log(con_width);
        // console.log($('#content'));
        let tip = document.querySelector('.tip1')
        //获取tip的宽度和高度
        let tip_width = tip.offsetWidth
        let tip_height = tip.offsetHeight
        // console.log(tip_width);
        //获取盒子的运动的宽度和高度
        let topp = con_height - tip_height
        let left = con_width - tip_width
        // console.log(left);
        // console.log(topp);

        //获取所有的tip下面的子元素
        let tip_child = content.children;
        //遍历上面的元素，给每个元素一个随机的top和left
        [...tip_child].forEach(item => {
            item.style.left = Math.random() * left + 'px'
            item.style.top = Math.random() * topp + 'px'





            //实现拖拽效果
            item.addEventListener('mousedown',down)
            function down(e) {
                //当前盒子距离容器的左偏移量
                this.startL = this.offsetLeft
                //当前盒子距离容器的上偏移量
                this.startT = this.offsetTop
                //鼠标按下时的位置
                this.startX = e.clientX
                this.startY = e.clientY
                //使用bind改变this指向，使其指向box
                this.move = move.bind(this)
                this.up = up.bind(this)
                //鼠标按下后给document绑定mousemove以及mouseup事件
                document.addEventListener('mousemove', this.move) //当鼠标移动时，执行下面的move函数
                document.addEventListener('mouseup', this.up) //当鼠标抬起时，执行下面的up函数
            }
            
            function move(e) {
                // 定义变量：用当前鼠标的位置 - 初始的鼠标位置 + 盒子的宽度/高度
                let curL = e.clientX - this.startX +this.startL,
                curT = e.clientY - this.startY +this.startT
                // 边界值判断
                curL = curL < 0 ? 0 : (curL > left ? left : curL) //三元表达式
                curT = curT < 0 ? 0 : (curT > topp ? topp : curT)
                this.style.cssText = `top:${curT}px;left:${curL}px` //拼接字符串

                this.style.zIndex = 99
                $(this).siblings().css('zIndex', '0')
            }
            
            function up(e) {
                //鼠标抬起，document解绑事件
                document.removeEventListener('mousemove', this.move)
                document.removeEventListener('mouseup', this.up)
            }


        })

        //单击删除评论功能
        //注册点击事件，实现当点击的时候获取当前小纸条的id,
        let close = document.querySelectorAll('.close');
        console.log(close);
        [...close].forEach(item => {
            item.onclick = function () {
                id = this.getAttribute('id')
                // console.log(id);
                del()
            }
        })


        //双击删除评论
        let dell = document.querySelectorAll('.tip_h')
        console.log(dell);
        [...dell].forEach(item => {
            item.ondblclick = function () {
                id = this.getAttribute('id')
                del()
            }
        })


        //点击该元素，该元素放到最前面
        console.log(content.children);
        [...content.children].forEach(item => {
            item.onclick = function () {
                this.style.zIndex = 99
                $(this).siblings().css('zIndex', '0')
            }

        })
    })






//封装删除评论
function del() {
    let con = confirm('请确认是否删除')
    if (con) {
        ajax({
            url: 'http://chst.vip:1902/students/del',
            data: { id: id }
        })
    } else {
        alert('已取消')
        return
    }
    window.location.reload()
}


//实现添加评论的功能
//首先先获取元素
let btn = document.querySelector('#submit')
let textarea = document.querySelector('textarea')
let ipt = document.querySelector('#ipt')
//使用input监听事件
textarea.oninput = function () {
    let length = this.value.length //监听输入框中的文字的长度
    console.log(length);
    //当文本域中没有内容时，按钮的状态为禁用
    if (length === 0) {
        console.log(1222);
        btn.style.disabled = true
        btn.style.backgroundColor = 'pink'
    } else {
        console.log(3222);
        btn.style.disabled = false
        btn.style.backgroundColor = 'deeppink'
        btn.style.cursor= 'pointer';

    }

    //获取文本域中输入的文字
    //实现点击按钮发送内容
    btn.onclick = function () {
        console.log(textarea.value);
        content = textarea.value
        let a = prompt('请输入昵称')
        if(a!==null){
            name1 = a
            console.log(name1);
            tinajia()
            window.location.reload()
        }else{
            alert('已取消')
            return  
        }
    }

}



//封装添加评论的接口
function tinajia() {
    ajax({
        url: 'http://chst.vip:1902/students/addlist',
        method: 'post',
        data: {
            content: content,
            name: name1
        }
    })

}


